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Chapter 1: 

Get To Know PWA 




Preface 
What is PWA? 


Outstanding Features of PWA 


• Examples of PWA 


Preface 


Undoubtedly, mobile is the most transformative force in the retail business 
today. In the last 5 years, mobile traffic has escalated with more than half of the 
traffic deriving from smartphones. The thing is, while customers are increasingly 
turning to mobile, the existing technologies are not satisfying. 

Responsive web design, an approach to make e-commerce websites display 
well on devices regardless of screen sizes is widely used to improve the interface 
on mobile devices. The problem is that it might slow down the whole page load 
speed or give up on various components for responsiveness. 

Mobile app development, then, appeared to handle concurrences of the respon¬ 
sive webs, providing a much better shopping experience for users. However, 
mobile apps are expensive to build and maintain. Also, it is difficult for merchants 
to convince their customers to download the apps. Most of the users only accept 
apps from brands that they are immensely 
interested in or make regular purchases. 


PROGRESSIVE WEB APP (PWA) 

EXISTS TO SAVE THE MOBILE COMMERCE WORLD! 


Progressive web app pairs the best of website and mobile app functionality while 
eliminating the pain points of the mobile commerce that have endured for so long. 

This technology blurs the lines between the website and the mobile app by 
generating a new front-end architecture (PWA storefront) and leveraging open web 
APIs to build app-like experiences directly in the browsers. 

As a result, PWA combines the discoverability and reach of the web with mobile 
app's look and feel. Its reliable, fast, and pleasant experience will help to maximize 
customer satisfaction, enhance conversion rates, and boost revenue growth. 
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Preface 


There's no question that Progressive Web 
Apps are gaining massive popularity and 
concern in the world. Some e-commerce 
giants and well-known brands have already 
become PWA early adopters and gained 
considerable results. Realizing this huge 
potential, a lot of companies, 
regardless of their business scales, have 
defined PWA development as their crucial 
digital strategies. 

Therefore, it is predicted that a numerous number of new PWAs will be launched 
in the last quarter of 2019 and in the next year. 

In the Magento community only, since Magento released the Magento PWA 
Studio, a set of tools to help developers to build PWA for Magento 2 more 
effectively, more and more business owners have been motivated to convert their 
websites to PWAs. 


If you are also having a plan of integrating PWA into your Magento 
website, it would be amazing, but wait for a second! 



In fact, Progressive Web App is still a new technology. The development of PWA 
in general, and PWA for Magento in particular, is complicated, which requires a 


thorough understanding and a strong practical experience of the developers to 
implement. As a merchant, you should equip yourself with fundamental knowledge 
of PWA first, to know what to expect and how to select qualified developers/ 
agencies for your projects. Otherwise, you might face the risks of losing your 
database, web traffic, and even your loyal customers when the transformation 
failed. 




"Risk 
comes from not 
knowing what 
you are doing” - 
Warren Buffet 
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Preface 


Apart from it, there are various Magento PWA integration solutions for you to 
consider, from third-party extensions, ready-made themes, to custom development 
from the ground up. Each of them has certain pros and cons as well as asks for 
different levels of investment. You have to be careful to figure out which is the best 
one for your project and your budget; and more importantly, to choose a solution 
that allows you to get the full potentials and benefits of PWA. 

That's why the Progressive Web App On Your Hand e-book by Tigren is an 
indispensable handbook for you. It will provide everything you need to know about 
PWA (how it works, features, examples, benefits, comparison with other 
technologies, limitations and solutions, etc.). Moreover, you can grasp the 
groundwork of Magento PWA integration process (available solutions, time and 
cost, FAQs, etc.). Thanks to that, you will gain more confidence to start your PWA 
development and avoid "throwing money down the drain". 
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What is Progressive Web App (PWA)? 


TIG R E N 



A Progressive Web App applies modern web technologies (HTML, CSS, and 
JavaScript) to deliver fantastic and frictionless shopping experience mimicking 
the mobile apps. It can function like a native app with an icon on users' mobile 
home screen, splash page (after opening the app), full-screen display, push 
notifications, and so on. 

All of the PWAs must assure three essential criteria: Fast (responding to user 
interactions nearly instantly), Reliable (being able to work under unstable network 
conditions) and Engaging (delivering smooth app-like experience). 
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What is Progressive Web App (PWA)? 


TIGREN 



How it works: 



PWAs are right at the user's fingertips via any web browser without the need to 
download or install a separate app. 

On mobile devices, when the users visit a website that was integrated with 
PWA, they will be invited to receive notifications from the store and add the PWA 
to their home screen. Once the shortcut is created, the users can instantly launch 
the PWA and enjoy all of its amazing features. 

Next time, the users do not need to open the browser and type in the URL again, 
just clicking on the shortcut on their mobile home screen. 

PWA operates in full-screen mode, hiding the browser URL bar on the top, and 
wisely disguising itself into a native app's look and feel. As a result, PWA is able to 
early shape the user expectations and give them seamless experiences after¬ 
wards. 
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Outstanding Features of PWA 
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Outstanding Features of PWA 


TIGREN 




Background Sync: Background sync gives you the ability to hold up the user's actions 
(e.g.: send a message, send a contact form, upload photos, update profile...) when losing the 
Internet and complete those once getting the connection back. 



Cross-platform Availability: Since each native app must specialize in iOS or Android, 
the merchants must develop two separate apps to target the users of both platforms. On the 
contrary, PWA can be utilized regardless of the user’s browser. Therefore, a lot of time and 
cost for the app development and maintenance will be saved. 



\ LOW Data Commitment: When a native app is installed to the user’s smartphone/ 
■ tablet, it will pull directly from the device's resources. For PWAs, it will occupy just a modest 
I storage space to avoid affecting the whole device performance. 



Easy Updates: PWA actively updates itself in real time like a website. That's why the 
customers can effortlessly get the latest updates just by refreshing the page. Meanwhile, 
the native apps can only notify the customers of the new version, and it's up to the users to 
perform manual update or not. 


J 



SEO Support: PWA still follows SEO practices by maintaining the structure of original 
website, canonical URLs and crawlable sitemap. Therefore, it can be optimized, shared and 
searchable by search engines as usual. Conversely, the native apps can only be found and 
shown up in the search results of the app stores. 
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Examples of PWA 



1. Alibaba 

Alibaba is one of the largest online B2B 
firms in the world, which has served more 
than 200 different countries. Therefore, 
delivering a great mobile experience is 
always their first concern. PWA is a wise 
investment of Alibaba when they 
experienced an explosion in the conversion 
rate (76%). Additionally, this PWA is 
immensely effective to engage the users 
with the number of active users growing by 
30%. 


Another well-known brand that applied the 
PWA successfully is Lancome cosmetics. At 
Lancome, they found a paradox that although 
the number of mobile users has risen 
dramatically in recent years, their mobile web 
conversions are very low in comparison to 
desktop conversions. Hence, they decided to 
build a PWA and here are what they got: 15% 
decline in bounce rates, 50% increase in 
mobile sessions, 17% growth in conversion 
rates, etc. 


2. AliExpress 



Being a part of the Alibaba Group, 
AliExpress also followed the Progressive 
Web App strategy and has gained a lot of 
positive results. After a short period of time 
introducing PWA, AliExpress's conversions 
increased sharply by 104%. Besides, their 
users visit more pages per session and 
spend more time per session on average. 


3. Lancome 



m a §i 
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Examples of PWA 


4. Trivago 

Trivago is a travel site that utilizes 
PWA to deliver seamless interactions to 
their customers. Its PWA has an intuitive 
interface that is easy for the travelers to 
either compare prices of different hotels, 
read the reviews, or book a selected 
hotel. With the power of PWA, Trivago 
recorded a noticeably higher conversion 
rate than its native app. Moreover, its 
hotel bookings click-through rate 
experienced a dramatic growth of 97%. 



Pinterest is by far the most familiar 
website when we look for creative ideas. 
However, its conversion to signups and 
mobile app installations are too low 
(roughly 1 %), that's why they moved on to 
PWA. Pinterest achieved many impressive 
results thanks to PWA release: higher 
revenue from user-generated ads 
(increasing by 45%), higher ad 
click-through rate (rising by 50%), and 
improved user engagement. 




5. Twitter Lite 



Introduced by Twitter from 2017, 
Twitter Lite actually is a PWA that ena¬ 
bled faster performance and higher 
user engagement, and significantly 
increased ad clickthrough rate and time 
spent on the mobile web. Surprisingly, 
nearly 80% more tweets were recorded 
via Twitter Lite than before via the 
native app. Moreover, the bounce rate 
saw a decline of 20%. A lot of web push 
messages appear even when the PWA 
is closed. 

6. Pinterest 




info@tigren.com 


www.tigren.com 





























Examples of PWA 



7. Flipkart 


8. BMW 


Another impressive case is the PWA of 
Flipkart - the largest Indian e-commerce 
store, named Flipkart Lite. It plays an 
important role in boosting conversions 
(70% increase), re-engaging their custom¬ 
ers and stimulating longer time spent on 
the site. Besides, it's worth noting that 
since most of the mobile users in India 
accessing the site via a 2G network, PWA's 
fast loading page and offline functionality 
are extremely valuable. 




The PWA of BMW helps it to outweigh 
a lot of competitors with lightning load 
speed. Apart from it, the PWA provides 
useful and valuable content and that goes 
beyond the automotive industry. 
Therefore, BMW's customers spend 3 
times more time on the PWA than on its 
previous mobile site. 


9. Tinder 


Tinder is one of the most popular dating 
apps nowadays, which allows users to 
like (swipe right) or dislike (swipe left) 
other users. With the release of PWA, 
Tinder even attracts more and more users 
to join and stay every day. 
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Examples of PWA 



10. Starbucks 


The last name in the list of top 
Progressive Web Apps examples is 
Starbucks's PWA. It is very eye-catching 
and user-friendly, which behaves like an 
app and works effectively in areas with 
weak network connections. By using this 
PWA, the customers can browse the 
Starbucks menu and make an online 
order with ease. 

And The List Goes On... 

Besides the above examples of PWAs, there are still a lot of big companies that are 
using this technology, for example, Virgin America, Financial Times, Forbes, Infobae, Book 
My Show, Lotto, Washington Post, Fandango, Flipboard, Settled UK, The Weather Channel, 
Google Maps Go, Facebook, Nasa, Instagram Lite, Uber, Netmoms, Telegram, Pure 
Formulas, Wego, OLX, Jumia Travel, MakeMyTrip, Continetial AG, Nau.ch, George At Asda, 
Treebo, Tourimus, Petlove, and so on. 

Find more about their interesting PWAs at: http://bit.Iv/pwa-examples. 
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PWA 

For Magento 2 

• What is PWA for Magento 2? 

# Benefits of Integrating PWA 
Into Magento 2 


Magento PWA vs Responsive Website 


Magento PWA vs Native App 


Magento PWA vs AMP 



What is PWA for Magento 2? 


V 

Since the release of Magento PWA Studio*, Progressive Web Application 
becomes one of the most important considerations of Magento merchants who are 
seeking a high conversion rate and cost-effective mobile solutions for their 
businesses. 

Progressive Web App for Magento 2, or Magento 2 Progressive Web App, refers 
to Magento 2 websites that are integrated with PWA technology. 



(*The Magento PWA Studio is a set of developer tools that allow for the 
development, deployment, and maintenance of a PWA storefront on top of Magento 
2.3 and above. It uses modern tools and libraries to create a build system and 
framework that adheres to the Magento principle of extensibility.) 
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What is PWA for Magento 2? 
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After being upgraded to PWA, there are some significant changes to the original 
Magento websites: 

• Firstly, Magento frontend is replaced by the flexible and powerful PWA 
storefront. Now, the website will be divided into 2 parts: PWA storefront & Magento 
backend, which are connected via API. 

• Secondly, when the users access a Magento 2 store that was converted to 
PWA (on their mobile browsers), they will see a popup with the call-to-action "Add ... 
to home screen". Once they click on the "Add" button, a shortcut of the site will be 
instantly created on the home screen. 

• Thirdly, the new PWA storefront delivers a different experience for users on 
desktops. It might have the same (or different design depending on the merchants' 
requirements) as the previous theme of the website but be noticeably faster. 

• Fourthly, compared to Magento 2 websites without PWA, the ones with PWA 
are definitely much faster without repeated page reload — only lightning Ajax 
loading. Also, it comes with a wide range of app-like features. 

• Fifthly (and most importantly), Magento PWA brings about a revolution to user 
experience on mobile devices. From the users' point of view, they hardly realize the 
differences between a PWA and a normal native mobile app. Both of these mobile 
solutions offer fast page load speed, optimized design for small-screen devices, 
icon on the home screen, splash page, offline mode, push notifications, and so on. 
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Benefits of Integrating PWA Into Magento 2 




Magento PWA’s engaging features keep 
users in apps. Push notifications bring users 
back, even when the web apps are closed. 
Home screen icons maintain visibility. If you 
want to satisfy your customers, boost your 
sales and stay ahead of the competition, 
let’s move forward with PWA! 



Enhance User Experience: 

PWA for Magento 2 can bring your mobile user experience to the next level. Compared 
to normal webs, it's faster and more functional with a better design for mobile. 
Compared to native apps, PWAs might offer many similar features but it's easier to add 
and update a PWA than a native app. 



Boost SEO & Improve Google Ranking: 

On one hand, Magento PWA includes a number of pages (with specific URL for each), 
which can easily be shared and promoted like regular web pages. In other words, you 
can still build backlinks as well as optimize page content for PWA to get a high 
position on SERPs. On the other hand, PWA might help to decrease the bounce rate 
and raise the session duration, which are important indicators of SEO. 



Increase Conversion Rate: 

Magento 2 Progressive Web App is fast and stable, which facilitates the shopping 
journey, from product search to checkout, and stimulate more purchases as a result. A 
lot of e-businesses applying PWA experienced an 

impressive growth in sale conversions and a remarkable decline in cart abandonment. 
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Benefits of Integrating PWA Into Magento 2 




Stimulate Marketing Campaigns: 

With push notifications, it's easy to draw the attention of customers to your new product 
releases, promotions and discounts. By this way, you might reach more customers, 
while paying less in comparison to traditional marketing methods like email marketing. 


Spread Reputation & Get More Traffic: 

Actually, the number of PWA applications is still very limited compared to the huge 
number of mobile apps. If you can seize this opportunity to join the group of "PWA early 
adopters", there is a high possibility that your brand name will be mentioned in all 
articles of PWA examples. Then, people who are 

curious about this technology might visit your store to experience a "real PWA". Let's 
guess how much traffic your site will get thanks to this unexpected source? 


Increase Average Order Value: 

PWA layouts and navigation encourage increases in average order value since 
shoppers can quickly browse products and related merchandise categories. 
Merchants can thus provide more opportunities for shoppers to add additional items 
to their cart prior to checkout. 



Be The Leader In Your Niche: 

By streamlining the purchasing process, PWAs can boost your shopper engagement, 
leading to higher conversions and revenue growth. Besides, although Magento PWA is 
amazing, not all Magento stores have realized its potentials, why don’t you take the 
chance to be the pioneer in your market? 
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Magento PWA vs Magento Responsive Website 


r 



There is no doubt that mobile e-commerce is growing at a spectacular rate, 
that's why all Magento stores must focus on enhancing the user experience and 
raising the conversion rates on mobile devices. There are several solutions for that 
but the most common one is to build a Magento Responsive Website. Besides, the 
trend of converting the website to Magento Progressive Web App has been raised 
recently to deal with the same issue. 


We would like to make a comparison between Magento Responsive Website 
and Magento 2 PWA, in order to figure out which would be a more effective 
solution for e-commerce online stores. 


What is a Magento Responsive Website? 

With the dramatic growth of mobile devices, more and more people are using 
small screens to view web pages. 

To deal with that, a Magento Responsive Website is developed with the 
capability of resizing itself depending on the size of the device used to view the 
site. In other words, it has only one design but being displayed nicely regardless of 
the user devices, from desktops, laptops to smartphones and tablets. 
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Magento PWA vs Magento Responsive Website 
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From technical perspectives, the website will comprise various layouts, grids, 
images, and CSS media queries. Owing to that, it will be able to generate proper 
resolution, images, and scripting abilities for any screen size. 

What is a Magento Progressive Web App? 

Magento Progressive Web App is a "hybrid" between the websites and mobile 
apps with the aim of delivering app-like experiences for mobile users. It replaces 
Magento frontend template (where you can make it responsive or not) with the 
advanced PWA storefront connected to Magento backend via APIs. 

When the users open the website on their browsers, they will see a popup asking 
their permission to add the PWA on their mobile home screen. Once the PWA is 
added, there is a shortcut of the PWA on the home screen that looks like normal 
mobile apps. From then on, the users will have quick access to the store, and more 
importantly, can enjoy app-like features such as fast page load speed, full-screen 
display, push notifications, offline mode, and so on. 

SIMILARITIES 

There are some noticeable resemblances between Magento 2 Progressive Web 
Apps and Magento 2 Responsive Websites: 

• Purposes: Both of these solutions are for improving user experience, especially 
for mobile users. 

• Responsive design: Both Magento 2 PWA and Magento 2 Responsive Websites 
deliver the changeable look and feel for each user device. 

• Codebase: Only a single codebase is required to develop either Magento 2 
PWAs or Magento 2 responsive websites. In comparison, if you want to develop 
native apps, you have to develop one for Android, and another for iOS with two 
separate codebases. 

• SEO benefits: There is only one URL for all devices so it would be easy for the 
merchants to share and promote their responsive stores or PWAs. 

Ease of user approach: Although the number of mobile users is increasing, more 
people still prefer visiting the websites (on their browsers) to downloading the 
mobile apps. Fortunately, both responsive website and PWA for Magento 2 
approach the customers through this traditional "entrance". 



info@tigren.com 


www.tigren.com 


Magento PWA vs Magento Responsive Website 


A 


DIFFERENCES 

At the same time, Magento 2 Progressive Web App differs Magento 2 
Responsive Website in many ways: 

• Popularity: Obviously, more people are familiar with the concept of responsive 
websites than progressive web apps, a hot trend in the last few years. However, 
Magento 2 PWA is rising in popularity thanks to its powerful features. Many 
experts even believe that this technology can replace responsive websites as well 
as native apps in the future. 

• Technology: A responsive website is developed using just HTML and CSS with 
media queries. Meanwhile, A PWA for Magento is often built based on Magento 2 
PWA Studio, ReactJS/ VueJS, and GraphQL. 

• Features: Obviously, responsiveness is the sole feature of the responsive 
websites. A Magento PWA can also deliver the responsive interface, but plus a lot 
of other features (e.g.: icon on home screen, fast loading speed, push notification, 
splash page, full-screen, network independence, background sync, and so on). 

• Development process: To have a responsive Magento storefront, you can either 
design a responsive template or apply a ready-made responsive theme. In general, 
it will take up to 1 month to build a new template from scratch and just a few hours 
to install an available theme. On the other hand, if you want to build a PWA for your 
store from the beginning (with the help of Magento 2 PWA Studio tools), it will take 
at least 5 months to complete your PWA storefront and API development. That's 
why many store owners look for Magento 2 PWA integration service to save the 
time of development, using ready-made PWA theme for Magento 2 instead of 
starting from 0. It's worth noting that applying a ready-made Magento PWA theme 
is much more complicated than applying a ready-made Magento responsive 
theme. You will have to customize the PWA storefront of the theme to make it look 
like your current website as well as update the base API to allow your custom 
functions or extensions. 
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• Cost of development: Since it takes more time and effort to build a PWA in 
Magento 2, its associated cost is also significantly higher than developing a 
responsive design. You can have to pay just from $100 to have a ready-made 
responsive theme and a little extra fee for installation. However, it might cost 
$5,000 - 20,000 to convert your store to Magento 2 Progressive Web App. However, 
remember that you get what you pay for! 

ALL THINGS CONSIDERED, WHICH IS BETTER? 

Both Magento PWA and Responsive Website are great solutions to enhance 
mobile user experience. However, Magento responsive site shows a lot of 
limitations when being compared with the PWA waves. If you have a good budget 
to develop a PWA for your Magento 2 store, go for it! 
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Despite offering a fantastic and frictionless shopping experience, Magento 
mobile native apps are very expensive to build and maintain. In addition, most of the 
consumers only download and use apps from brands with which they have regular 
interactions. Native apps, therefore, are only great for businesses with a large 
budget, mature loyalty programs, or customers that engage and purchase multiple 
times a month. For small-to-medium firms who cannot afford a native mobile app, 
they are still looking for a proper solution to improve mobile experience. 

Then, Magento PWA comes to life and satisfy the needs unfulfilled by the native 
apps. It promises to solve two problems at once: enhancing store performance and 
usability on mobile while requiring an acceptable amount of investment. That's why 
some people think that Magento PWA can become an alternative option for the 
Magento Native App. 

There are 5 fundamental differences between a PWA and a native app: 

• A native app can only run on a certain operating system (iOS or Android) while 
PWA is powered by mobile browsers and supported on both iOS and Android. 

• Merchants must submit native apps to app stores (with certain fees) so the 
apps can be found. Whereas, PWAs enjoy unrestricted, flexible distribution since 
they don't need to be listed in an app store. 

• Users have to download the native apps from an app store; meanwhile, PWA 
can be installed quickly after adding to home screen. 
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Magento PWA vs Magento Native App 


TIGREN 



• Users must access their app stores to get the latest version of the native apps 
but refreshing to get PWA updates. 

• Since PWA runs right in a web browser, it is easier for store owners to share 
and promote the PWAs than native apps. PWAs work on-demand without taking up 
the device's memory like the native apps. 

SIMILARITIES 

Both Magento PWA and Magento Native App are considered favorable solutions 
that allow merchants to build strong engagement of mobile users. They share some 
similarities, for example: 

• Offline mode: This function allows users to access cached content even when 
the PWA/ native app works offline. 

• Push notifications: This can be used as a great marketing tool allowing you to 
reach out to your users with short attractive messages. 

• Shortcut on home screen: After being added/ downloaded, there is an icon the 
user's mobile home screen, representing quick access to the app. 

• Fast loading speed: There is no page reloads on either PWAs or native apps, 
just lightning Ajax loading to transit among pages/ content. 

• Optimized design for mobile devices: All of the font sizes, buttons, transitions, 
images, blocks... are re-designed from the websites to show nicely on small screens 

DIFFERENCES 

1. Cross-Platform Availability 

• Progressive Web App: PWA is cross-platform, which can work on both iOS and 
Android devices with a single codebase. 

• Native App: A native app can only run on one operating system (Android or 
iOS). An Android native app can be found and work on only Android devices. 
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2. Development Time & Cost 

• Progressive Web App: As mentioned, you can upgrade your existing 
Magento 2 website to PWA with help of Magento 2 PWA Studio/ Magento 2 PWA 
Theme/ Magento 2 PWA extensions. It can take several hours, 2-3 months, or up to 
6 months to release your PWA, depending on your selected solution. 

• Native App: Brands must build separate native apps for each operating 
system, which leads to doubled cost and effort of development. What's more, there 
are extra fees when submitting the app to marketplaces ($99/year to get a place on 
the Apple App Store & one-time fee of $25 for Google Play). In general, the cost of 
developing a native app is always higher than that of a PWA. 


3. SEO Support 

• Progressive Web App: PWAs can still be indexed by Google since it includes 
URLs for each page like a normal website. As a result, it's possible to implement SEO 
on-page and off-page to improve your PWA ranking on search engines. 

• Native App: Since Native Apps only can be found in the app stores, they have 
no relations to your current website ranking. As a consequence, you have to do two 
jobs at the same time: optimizing your website and boosting your app ranking. 


4. Mobile Data Usage 

• Progressive Web App: One major advantage of PWA is that it only occupies a 
small amount of data on the user's device. For example, Twitter Lite PWA only 
makes up 600KB compared to 23.5MB of its Android Native App. 

• Native App: When a Native App is installed on mobile devices, it will require a 
certain data amount from the device's resources. Therefore, when users download 
heavy apps or they forget to close the apps after using, which can impact negatively 
on battery, storage space, and performance of the device. 


5. Security 

• Progressive Web App: PWA might be more secure because it has to run under 
HTTPS. These security codes ensure that nobody can meddle exchanges between 
the client and the server. In a secure environment, customers can enter personal 
details and credit card information without the worry they might be stolen. 
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• Native App: With Native App, you have many options in other security 
measures. If your app requires a login, you can use multi-factor authentication and 
combine certificate for more secure communication. Besides, all Native Apps must 
pass the app stores' security requirements before getting published. 

6. Installation 

• Progressive Web App: You don't need to search, download and install 
Magento PWAs from the central app stores like for native apps. From the browser, 
you can easily add the PWA to your home screen just by few clicks. This feature is 
immensely convenient even for users who don't know what Progressive Web App is. 

• Native App: In the first step, the customers have to find the app on the App 
Store, and then confirm the installation. After accepting, they continue waiting for 
the download. For large capacity applications, download errors are very common. 
Besides, the users don't even know the existence of the apps. 

7. Updates 

• Progressive Web App: Every time you make changes to your services, a PWA 
can keep all your users up to date. It enables them to immediately enjoy the latest 
functionality, features, and security updates without re-downloading the app. 

• Native app: It's compulsory to access the app stores when you want to 
upgrade to a new version of the app. 

Wrapping Up 

Magento PWA seems to be more favored at this moment due to the powerful 
features it brings about and the reasonable price it requires for the development and 
maintenance. 

For small Magento businesses, selecting Progressive Web App is more 
recommended since it will them you reach a wide spectrum of customers within 
your tight budget. 

For large Magento online stores with a generous budget, it would be wonderful if 
they can develop both Native Apps & PWAs to approach the maximum number of 
potential buyers. 
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There are dozens of consequences when your Magento website has a slow page 
load speed. For example, it can make your customers feel frustrated, kill your 
conversions and decrease your site rankings on Google and other search engines. 
That's why most of the Magento store owners try to apply all ways to enhance their 
website speed. 

Among available solutions, integrating AMP or PWA with Magento stores seem to 
be most effective. However, PWA is highly recommended while AMP is not for some 
reasons that we are going to discuss today. 

MAGENTO PROGRESSIVE WEB APP (PWA) 

• What is it? 

PWA is developed with the aim of blurring the gap between websites and mobile 
apps and only "filter" and keep the best of each channel. With PWA, Magento store 
owners can bring about the app-like experience to their customers while not giving 
up on reach of their website. 
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To upgrade a normal Magento website to a Magento 2 PWA, the developers will 
develop a new PWA Storefront (by ReactJS) to supplant the existing Magento 
frontend. Also, they must develop API to connect that PWA Storefront with Magento 
backend. 

After being integrated, the site will have all powers of the Progressive Web App. 
Their web page speed will be 3-5 times faster than before - on both desktop and 
mobile devices. 

• Available solutions to convert Magento website to a PWA: 

► Magento PWA Themes 

► Magento PWA Studio 

► Magento PWA extensions 

• How it works (for end-users): 

On desktops: As you can see, Magento 2 PWA's page load speed on the 
desktops is impressive, which is even significantly faster after you browse on the 
site for a while or in your next visit. It's worth noting that there is absolutely no 
WHOLE page load, only Ajax loading to show the selected content (under a fixed 
menu and header). 

On smartphones, tablets: When you open Magento 2 PWA demo on the browser of 
your mobile device, Chrome for example, you will instantly notice 2 popups asking 
your permission to send push notification and inviting you to add the PWA to your 
home screen. Once it is added, you can easily launch the PWA and enjoy its 
incredible app-like experience (splash page, full screen, offline mode, background 
sync...) 

AGENTO ACCELERATED MOBILE PAGES (AMP) 

• What is it? 

AMP allows Magento stores to build lightweight web pages for mobile by 
simplifying the HTML and utilizing a streamlined version of CSS. Also, to ensure fast 
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page load on mobile devices, JavaScript is restricted while CDN is must-use to fetch 
and cache content. 

Needless to say, the key advantage of AMP is reducing the page load time and 
providing content to users in a minimum time span. Some websites can reach 4 
times faster after transformed to AMP. Besides, AMP can help to enhance your site 
visibility on SERPs and get more traffic. 


• Available solutions to convert a Magento website to AMP: 

Magento AMP extensions 
Magento AMP themes 

The available AMP modules and templates for Magento will help the store to 
create and edit the content of AMP pages (for Home page, Category pages, Product 
pages, CMS pages) with a simplified HTML structure, and integrate with Google 
Analytics to track the performance of those pages. 


• How it works (for end-users): 

When the users enter a query on Google search engine, it will show some top 
stories (AMP versions of some websites) above regular results for that query. As a 
result, publishers who have AMP versions of their content might have a higher 
chance to rank on SERPs. Take a look at the below example for better 
understanding. 


EXAMPLES OF PWA & AMP 


Default welcome msg! 
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Q TIGREN 
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DOWNVOTES FOR MAGENTO 2 AMR WHY? 

You might be very confused when we first did not support Magento Accelerated 
Mobile Pages but then showed many benefits of using it, right? 

Now, we will tell you the reasons: 

• AMP is more suitable for publishers. To be more specific, AMP works it best for 
the websites that have static content such as news-publishing, blogs, or other 
informative sites. 

• With simplified HTML, CSS, and JavaScript, it's not a good idea to apply AMP for 
Magento e-commerce websites with heavy and dynamic content and high depend¬ 
ence on user behaviors (e.g.: filter, sort, add to cart/ wishlist/ comparison list, view 
cart, etc.). 

• (Most importantly) Cart & Checkout are the most crucial pages for a Magento 
website, but unfortunately, AMP does not support these 2 pages. How do you think 
if your customers are very happy to browse and select products on your AMP pages, 
and are going to place the order but suddenly realizing that they cannot? 

• Even when you build AMP you still need a regular version of your website. In other 
words, your original website and AMP pages are different entities and will work par- 
allelly. As a result, AMP can do nothing to improve your current website speed. 

• The Magento stores will need a separate Google Analytics to track the 
performance of AMP pages. 

• AMP page design is restricted, which might result in lower user engagement and 
decrease conversions. 

Until all of the above problems are resolved, the store owners can consider AMP. 

UPVOTES FOR MAGENTO 2 PWA. WHY? 

As mentioned in the previous section, Magento 2 PWA can boost page speed 
regardless of the users' devices. 

And you know what, enhanced page load speed is just the beginning of the story! 
There are a lot of benefits that PWA can provide for your Magento stores, for 
instance: 
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• Enhanced user experience (with app-like experience, offline mode, 
background sync) 

• Improved SEO rankings (reducing bounce rate, raising session duration, increas¬ 
ing user experience...) 

• Secure transactions thanks to SSL certification (HTTPs) 

• Effective mean of customer approach (with push notifications) 

• Add to home screen and updates with ease 

Similar to AMP, PWA can also be applied for news websites. The difference is that 
PWA can meet all of the expectations of both news and e-commerce websites while 
AMP cannot. 

FINAL THOUGHTS 

Nowadays the success of an online business highly depends on how it delivers 
mobile shopping experience. As a Magento store owner, you should carefully 
consider which is the best method to speed up your site on small-screen devices. 
Unquestionably, AMP are effective to generate a fast website but there are a lot of 
shortcomings associated with it. On the other hand, PWA not only gives you speedy 
web pages but also contributes to enhancing user experience and your site 


rankings. 
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There are three available options of Magento PWA integration for merchants to 
consider: 

1. Install Magento 2 PWA Extensions 

This is the easiest way to add Progressive Web App features to your current 
Magento website. Now, there are many Magento 2 PWA extensions from different 
providers (both free and paid) for you to choose from. 

Pros: The cost of Magento 2 PWA modules are affordable (from $0.00 to $150). 
Also, it takes just a few hours to install those extensions on your site. 

Cons: In general, most of the PWA extensions for Magento 2 are not able to 
deliver full features of Progressive Web App. For some modules, they can just 
perform the "add-to-homescreen" and send push notifications while ignoring other 
essential features such as fast page load speed, offline mode, and background 
sync. You should not only read what the developers promote module, try their demo 
and you will see! 
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2. Develop A PWA From Scratch Based On Magento 2 PWA Studio 

Magento introduced Magento 2.3 PWA Studio to help us develop, deploy and 
maintain a PWA storefront for Magento 2 websites. 

Pros: Compared to available Magento 2 PWA extensions, developing your PWA 
from scratch using Magento 2 PWA Studio is a more comprehensive solution. It will 
replace your existing Magento storefront with PWA storefront that will be connected 
to your backend via API. 

Cons: Magento 2 PWA Studio is just a set of tools to support you in PWA 
development. There is still a long way to go. You can take a look at Venia storefront 
(PWA Studio demo) that is immensely basic and lack of many Magento default 
features. 

3. Build Your PWA Using Magento 2 PWA Theme 

Magento 2 PWA Theme is an advanced PWA integration solution, which is based 
on Magento 2.3 PWA Studio, ReactJS and GraphQL. It includes two parts: an 
extensive PWA storefront and built-in API to connect this storefront and Magento 
backend. 

Pros: Up to now, this seems to be the most potential solution to integrate PWA in 
Magento 2 website. Firstly, it can deliver all we expect from a PWA: lightning load 
speed (on both desktop & mobile devices), shortcut on the home screen, splash 
page, full-screen display, network independence, background sync, low data 
consumption, easy update, and so on. Secondly, its PWA storefront demo shows a 
much better version than the default Venia storefront with a complete layout for all 
pages of the site. As a result, it will reduce significant time for your PWA 
development. 

Cons: Although this Magento 2 PWA Theme meets all criteria of Progressive Web 
App as well as provides a great storefront that looks like a normal Magento 2 
frontend, you still need to customize the PWA storefront to meet your expected 
design. Also, if your site has some custom functions or installs some third-party 
extensions, you will have to check their compatibility with the new storefront and 
update the API as well. 
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1. About Tigren 

We are one of the very first Magento 2 
PWA solution providers in the world. 
With over 7 years of experience in 
Magento development, we are confident 
to be the one who delivers the best PWA 
integration solution for 
Magento at the moment. 
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2. Magento 2 PWA Theme by Tigren 

If you want to create a PWA for Magento from scratch, it might take at least 6 
months for the development. Or, you can consider using Tigren's Magento PWA 
Integration Service, to achieve your PWA within just 1-2 months. 

Why? Your PWA will be built from the solid foundation of our Exclusive Theme 
Base (including PWA Storefront & API), which helps to reduce a huge amount of 
time for your site transformation. 

Magento 2 PWA Theme by Tigren brings about all the incredible features of a 
PWA while embracing Magento's high standards. 

Find more about our PWA Solution at: 

https://www.tigren.com/our-services/magento-2-pwa-theme-integration/ 
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3. WhyTigren? 



Solid Experience ■ Unique Solution 


Tigren has a thorough understanding and 
considerable expertise in Progressive 
Web App, and more importantly, 
how to apply PWA in Magento 2. 

We have been working on 
a lot of Magento PWA projects and 


Magento 2 PWA Theme by Tigren includes 
a complete PWA storefront and associated API. 
Different from other PWA solutions, 
Tigren PWA is developed using the official 
Magento PWA Studio, ReactJS and GraphQL. 
As a result, it will deliver all the incredible 



Competitive Price 

Let's contact other Magento 
development companies 
who also offer Magento PWA 
integration services to get their 
quotes. Then, you will notice 
that Tigren's proposal is the 
most cost-effective. 



After-service maintenance and support 
are essential for any e-commerce 
development project. At Tigren, we 
will offer 3-6 months of free support 
after releasing our clients' Magento 
Progressive Web App. 


Tigren not only provides Magento 2 PWA 
development but also other Magento related 
services. If your current store hasn't been 
Magento 2.3.x yet, you can ask us 
to offer both PWA integration and 
Magento migration simultaneously. 
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4. How To Get A Quote From Us? 



Tell us your Magento website 

To start, let us know basic information of your website (e.g.: Magento 
version, number of products, type of the website - B2B, B2C, Marketplace, 
third-party integration - if any, and so on). 


Give us your list of Magento Extensions 

To propose a detailed plan for your Magento 2 PWA development project, 
we need to know all third-party extensions that are being used on your 
site. Since the PWA Storefront will replace your Magento frontend 
completely, any modules that have effects on the Magento frontend might 

not work properly. 

Our solution for that is customizing the PWA Storefront and updating 
the core API to make them work with your existing plugins. In unexpected 
cases, we must uninstall the extensions and develop similar functions 

directly on the PWA source code. 




Specify Your Custom Functions 



If your custom code was written with the purpose of enhancing site 
management on backend only, there is no need for PWA theme customi¬ 
zation. However, if it serves any functionality on the frontend, we cannot 
apply the code to the PWA storefront. 

The solution is that we will have to develop new features on the PWA 
akin to your current custom functions. Please specify your requirements 
for those tailor-made features when you ask us for the quote 




info@tigren.com 


www.tigren.com 









Tigren’s Magento PWA Integration Service 


TIG R E N 


r 


Tell us your PWA Design requirements 

There are three options for you to consider when it comes to Magento 
PWA storefront design: 

Maintaining your current Magento website design (with possible 
enhancements) 

Opting for our default theme design (with changes of colors, 
fonts, banners to match your brand identity) 

Creating a unique design for your PWA from the ground up 
The storefront design is crucial for the success of your PWA 
development. It's our responsibility to make it attractive, desktop- and 
mobile-friendly. 



Provide us with more information 



Don't forget to provide us with more details about your 
shipping carriers/ methods, payment gateways/ methods, 
languages, and currencies. 

We don't want to miss out on any sort of information at 
the beginning, to deliver the best Magento 2 PWA for your 
store eventually! 


5. Tigren PWA vs Other PWA Solutions 


r 

Tigren PWA 

Other PWA Solutions 

Design 

• Well-designed on Both 

• Only Mobile focus 


Desktop & Mobile 


Functionality 

• Full features of PWA 

• Limited features of PWA 


• Full features of Magento 

• Only basic features of 


core 

Magento core 

Cost 

• Affordable 

• Expensive 
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On April 2018, Magento released the first version of Magento 2 PWA Studio for 
PWA development. Here is the thing: it will take a lot of time and effort to build a 
PWA using those basic tools. That's why Tigren introduced the advanced Magento 2 
PWA theme, a perfect solution for whom wants to launch their PWAs more 
quickly. 

• Magento 2 PWA Studio (Venia demo): This is a vital set of tools to facilitate 
the process of PWA storefront development and maintenance for Magento 2 
websites. To help developers and store owners to imagine the results after 
creating a PWA with those tools, Magento offers the Venia PWA demo. 

• Magento 2 PWA Theme (by Tigren): This product is developed from 
Magento 2 PWA Studio's tools, ReactJS and GraphQL. It comprises a well-design 
PWA storefront and API to connect core functions on Magento 2 backend to the new 
storefront. With the base of Magento 2 PWA Studio, Tigren's PWA theme inherits all 
essential features but getting a lot of improvements and enhancements. 

By using our ready-made Magento 2 PWA theme, you can cut down the time of 
converting your website to PWA significantly, in comparison to developing PWA with 
Magento PWA Studio from ground up. More importantly, you will get an 
excellent version of PWA that is optimized for both desktop and mobile devices, with 
all of its powerful features. 
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Now we will show you how Tigren's PWA theme is better than Venia theme as 
well as any other PWA integration solutions on the market! 

We will go through each page on the PWA demos (e.g.: home page, category page, 
product page, shopping cart page, checkout page...), similar to orders on the video, 
to make the comparison. 

1. Homepage 

On mobile devices: 
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• Magento 2 PWA Studio (Venia demo): There is a header (including 
hamburger menu, favicon, search & cart icon), a list of several categories for the 
users to choose from, and a footer. 

• Magento 2 PWA Theme (by Tigren): The header consists of email, hamburger 
menu, brand logo, search, & cart icon, customer quick access. The main content 
includes a banner slider, a list of products that can be added to cart/ wishlist/ 
compare, and a footer. 


On the desktop: 

There is a huge difference between PWA Venia theme and Tigren's PWA theme 
when being shown on the desktop. It's clear that the Magento 2 PWA Studio demo 
is only optimized for mobile devices, its display on both desktop and mobile 
devices are very similar and basic. On the contrary, Magento 2 PWA theme by 
Tigren has different views to satisfy separate needs and experiences of desktop 
and mobile users. 
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When being accessed from the desktop, PWA storefront of Tigren looks like a 
normal Magento website, but on mobile devices, the available options will be 
grouped and reduced to deliver lively app-like experience. 


2. Category Page 
On mobile devices: 
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• Magento 2 PWA Studio (Venia demo): There is a simple grid list of the 
products on the selected category. Besides, there is a pager on the bottom of the 
page. 

• Magento 2 PWA Theme (by Tigren): There is a category banner, product 
sorting (by position/ price/ name), optional display mode (grid/ list), product filter, 
pager, optional number of items per page, lists of products on wishlist/ comparison 
list, and the product list that can be added to cart/ wishlist/ compare. 
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On the desktop: 



Layered navigation is one of the most crucial features in a Magento 
e-commerce website but it is removed in the Magento 2 PWA Studio demo. 
Realizing the importance of this feature, we added it on all category pages (on both 
desktop and mobile devices) so the users can easily filter products as they want. 

3. Product Page 
On mobile devices: 
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• Magento 2 PWA Studio (Venia demo): There are the product name, price, 
images, attributes, description, SKU and add-to-cart ability. 

• Magento 2 PWA Theme (by Tigren): There are all fundamental product 
information like in Venia demo, plus stock status, taxes, add-to-wishlist/ 
add-to-compare/ email abilities, product details/ more information/ review, and a 
related product block. 

On the desktop: 



On the Magento 2 Progressive Web App provided by Tigren, there are extra 
sections (reviews and related products) compared to Venia PWA theme in order to 
help the stores boost sales. 


4. Shopping Cart 
On mobile devices: 
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• Magento 2 PWA Studio (Venia demo): On the shopping cart popup, there are 
3 options for users to add the item to favorites, edit the item, and remove item. 
Besides, the users can review information of added items on the cart (product 
name, quantity, price, cart subtotal). 

• Magento 2 PWA Theme (by Tigren): In spite of offering the similar elements 
on the shopping cart popup of Venia theme, it's much easier for the users to 
update and remove the selected items on the cart. 

On the desktop: 



The users will go to the new page when editing the cart (like the default 
Magento website flow) while on the Venia theme, only the content on the shopping 
cart changes. 


5. Checkout Page 
On mobile devices: 



• -• 


•-• 

SHOPPING CART X 

a Petra Sundress : 

fj Fashion Size :M 

Fashion Color: Rain 

A 


0 info@tigren.com © Support 

Q A 

= (5 TIGREN Mu- 



Checkout 

Please enter your details below to complete your 


Checkout 

purchase. 

Ship To Add Shipping Information 

Shipping Address 

Email * 

Pay With Add Billing Information 

Use Specify Shipping Method 

TOTAL ™ S$ 

^ Bock to Cart ^ 
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• Magento 2 PWA Studio (Venia demo): After clicking on the "Checkout" button 
on the shopping cart popup, it will show a list of the required information to com¬ 
plete checkout. First, the users must select "Add Shipping Inform...", enter all 
required fields, and then click on "Use that address" to turn back. Next, they have to 
click on "Add Billing Information..." to add billing address, and click on "Use card" to 
turn back. Finally, they must click on "Specify Shipping..." to select a preferred 
shipping method and click on "Use method" to turn back. Once all information is 
fulfilled, the users can click on the "Confirm Order" button to complete their 
checkout process. 

• Magento 2 PWA Theme (by Tigren): Although there are still 3 steps in the 
checkout, the flow in Magento 2 PWA theme of Tigren is more convenient for 
users. Instead of multiple clicks to turn back and continue, the users just need to 
click on the "Next" button to move to the following steps. As a result, it will save a 
lot of time from checkout and help to decrease the rate of cart abandonment. 

On the desktop: 
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6. Customer Account 
On mobile devices: 
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• Magento 2 PWA Studio (Venia demo): After login, the users can only view 
their purchase history or... sign out. 

• Magento 2 PWA Theme (by Tigren): After login, the users can review their 
account information, edit their profile information (name, email, password), check 
order information (#, date, ship to, order total, status,...), manage their addresses, 
and view/ edit products on their wishlist (add notes, add to cart, change quantity). 

On the desktop: 
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Again, Tigren's PWA theme defeated Magento 2 PWA Studio's default theme 
when it comes to customer account management. With very limited features (sign 
in/ out, view purchase history), Venia theme will not be able to make the users 
satisfied. 

Final Words 

To sum up, Magento 2 PWA theme by Tigren can outweigh Magento 2 PWA 
Studio demo (Venia) in all aspects, from the design to functionality. Since the Venia 
theme is only optimized to serve mobile users, you will have to make significant 
customizations to make it work on the desktop. Conversely, our Magento 2 PWA 
theme is a comprehensive solution to replace your current Magento frontend 
completely with different views optimized to each device. 
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^ How Does Magento PWA Benefit SEO? 

^ How Much Does It Cost to Upgrade a 
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Mobile Webs, But PWA? 
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and Solutions? 
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Magento PWA might make a great contribution to your SEO strategies in various 
ways. As you might know, there are many factors that might affect your site rankings 
such as average session duration, bounce rate, page(s) per session, user 
experience, links, etc. Fortunately, PWA takes all of those practices into 
consideration to create satisfying SEO results. 

1. Magento 2 PWA's Pages Can Be Indexed And Widely Shared 

After converting your Magento website to a Progressive Web App, you can give 
your customers amazing experiences of an app while keeping the robustness of the 
old web. 

In contrast with a mobile app that cannot be found outside the central app stores 
(e.g.: App Store, Google Play Store), your Magento PWA actually is still a web page 
that is crawlable and indexable. 
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More specifically, the Progressive Web App is treated as a single-page and 
published as a Javascript site. There is no need to create another "abc.com" URL. 
That's why Google bots can crawl and index all the pages of PWA, like what they do 
with a normal website. 

Apart from it, because each page comes with its own unique URL, it's easy to 
share and promote your PWA on social networks. 

2. All Magento PWAs Are Highly Secured With Enabled HTTPs 

After having an SSL certificate, your PWA connection with an "https://" URL is 
established, leading to a wide range of benefits: 

• Protects the shoppers' private information 

• Secure online transactions from data loss risks 

• Build up buyers' trust and confidence 

• Enhance store reputation 

• Reduce the risk of phishing and cyber attacks 

In 2014, Google officially announced that HTTPs was a ranking factor on SERPs. 
At the same time, HTTPs is one of the first and foremost conditions for developing 
a Magento 2 PWA. 

3. Magento PWA Satisfies Google Mobile Page Speed Criteria 

Mobile page speed has been considered as one of the vital SEO ranking factors 
since Google released an algorithm update in July 2018. Therefore, if it takes too 
long for your site to fully load on the mobile devices, don't expect a high ranking on 
SERPs. 

With PWA storefront, your website speed will be enhanced significantly, which 
would make a great contribution to improving your rankings. 

4. PWA For Magento Helps To Decrease Bounce Rate & Increase Session Duration 

Many PWA examples show a significant decrease in the bounce rate and increase 
in the average session duration since the user experience is improved. 

Firstly, Magento PWA is very fast, which might take only 2-3 seconds to load a full 
page even when your Magento website has thousands of products. 
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Secondly, thanks to the powerful offline accessibility of Magento 2 PWA, the 
users still can open the app without the Internet connection to view again the 
contents/ pages they visited. From the technical point of view, the app is able to 
work offline by using the data cached when the user was online previously. 

For all of the above conveniences, the customers are likely to spend more time 
browsing the products on the sites integrated with PWAs. 

5. More Pages Per Session Are Recorded With Magento Progressive Web Apps 

PWA for Magento helps to cut down irritating repeated page load and white 
screens compared to regular websites. Instead of reloading the whole page to move 
to another page, PWA will show lightning Ajax load to get the needed content for the 
users. 

As a result, the users will feel comfortable to access as many pages as they want 
on the web app or instantly back to the previous pages without time-consuming 
page loads. 

After launching Progressive Web App, Lancome experienced a growth of 53% in 
the number of mobile sessions. If you want to have a similar achievement, convert 
website to PWA now! 

6. Building Links For Magento PWA Are Possible 

Although Google now focuses more on the site content to arrange websites on 
SERPs, the number of quality backlinks is still a pivotal SEO ranking factor. 

For Magento PWA, you can apply and maintain all backlink building strategies you 
are using for your current website since the URLs are the same. Meanwhile, it's 
impossible to create backlinks for the native apps to make it shows on Google 
search results. 

7. Magento 2 PWA Offers Separate Storefront For Mobile Devices 

Mobile-Friendliness is another Google ranking factor, which means that mobile- 
optimized websites will have more advantages in the ranking competition. With a 
separate design for mobile, Magento PWA is responsive and highly mobile-friendly. 
It is created with larger fonts and easier-to-tap buttons, with unimportant elements 
removed for the best experience on small-screen devices. 
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Does your budget make allowances for you to move forward with development? 
Overall cost for a PWA with Magento will vary based on time and complexity of your 
current commerce platform. Over time as more Magento storefronts are created 
using PWA including Marketplace-ready extensions, the overall cost of 
development will be significantly reduced. 

As mentioned in the previous part, there are three methods to convert Magento 
2 websites to PWA, which are associated with different costs: 

1. Magento 2 PWA Extensions: 

You need to buy the module (up to $150) and pay for the installation service (or 
install and configure the extension yourself). 

2. Magento 2 PWA Studio: 

You have to hire PWA developers who have strong experience in both Magento 
2 and PWA to build your PWA from scratch. It will take up to 6 months to develop 
your PWA storefront and new API using Magento 2 PWA Studio tools. You should 
prepare a generous budget for this integration. 

3. Magento 2 PWA Theme 

Since both PWA storefront and core API were ready built, your cost will mainly 
depend on your level of customization. This cost would be more reasonable than 
the second solution and higher than the first solution but it deserves your 
investment. Contact Tigren to get a detailed estimate for your Magento PWA 
development project. 
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How Long Does It Take To Develop A Magento 2 PWA? 




Realizing the power of PW, more and more merchants decide to integrate PWA in 
Magento 2 stores. However, they do concern about the time to market of a 
Progressive Web App. If it takes a too long time to develop, the customers can't wait. 


Your Selected Solution Will Determine The Time It Takes 

For native apps, you might have to invest at least 6 months for the development 
process. For Magento 2 Progressive Web App, the time for development can be 
reduced since only one codebase is needed. 

Up to now, there are 3 common solutions to implement PWA in Magento 2 
websites, including Magento 2 PWA extension installation, PWA integration using 
ready-made PWA themes and PWA development using Magento 2 PWA Studio. 
Each of these approaches requires a different amount of time that will be discussed 
below: 


It can take only a few hours... 

If you just want to utilize a Magento 2 PWA extension. It's easy to find some PWA 
modules for Magento 2 using popular search engines. After having those 
extensions installed, your website might have some basic features of Progressive 
Web App such as add to homescreen, offline mode, and push notification. 

But, if you want to build a Magento PWA with full features and stable performance, 
this might not be a good option. 

Moreover, most of the available PWA extensions are highly dependent on Google's 
Service Worker and APIs that are not developed to serve Magento websites only. 
Therefore, there are many constraints when using those modules compared to the 
Magento PWA Studio tools officially introduced by Magento. 
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2-3 months... 

Is the needed time for developing your PWA based on Magento 2 Progressive 
Web App themes. 

For example, Tigren provides a Magento 2 PWA theme combining a ready-made 
PWA storefront and core API (to cohere the PWA storefront with Magento backend). 
That theme was built on the foundation of Magento 2 PWA Studio, ReactJS, and 
GraphQL. To apply this theme, Tigren's team will customize the storefront to look like 
your existing website design as well as update the API if your site has some custom 
functions. 

Since the huge time for developing the base storefront and API is eliminated, your 
total time of PWA development is down to 2-3 months only. 

Or up to 6 months... 

If you hire PWA developers/ Magento agencies to build your Progressive Web App 
from scratch in spite of using Magento 2 PWA Studio. The demo of Magento PWA 
Studio (Venia) is very basic and optimized for mobile only, you will have to 
customize it a lot to work on both desktop and mobile, as well as have full 
e-commerce 

functions. Also, you must develop the API, which might consume several months. 
Depending on your business's financial ability and time budget that you can select 
the most potential Magento PWA integration solution for your business. From my 
point of view, 2-3 months might be acceptable, which is enough to develop a 
qualified Progressive Web App and not too long. In the e-commerce industry, time is 
money, the pioneers always have significant advantages so you should start your 
Magento 2 PWA development project as soon as possible! 
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For all e-commerce businesses, profit is always one 
of the top concerns. For large companies and 
corporations like Virgin America, Starbucks, 
Alibaba, Washington Post, Lancome..., 
they definitely did not invest in Pro¬ 
gressive Web App if they see no 
benefits from it. 

Assumed that you invest 
$5,000-15,000 to convert 
your Magento store to a PWA, 
but you will get: 


X3 web page speed 
XI0 traffic (from multiple sources) 
X2 reaches & conversions 
X5 user engagement 
Lower cost for marketing 
Eliminated fees for submission on 
app stores 


How do you feel? Will PWA 
deserve your investment? 
You might probably have 
the answers. 
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Why Not Native Apps Or Mobile Webs, But PWA? 




There are some facts that you need to 
know before deciding to go on with 
Magento native apps, Magento Mobile 
Webs, or Magento 2 Progressive Web App: 
Nearly 50% of all retail e-commerce 
revenue is being generated via mobile 
commerce. Now, customers tend to spend 
more time on mobile devices than 
desktops. 

On mobile, shoppers feel more 
convenient when using native apps than 
browsing on the web. It's easier for the 
users to find the apps on the home screen 
and stay updated with all promotions 
thanks to the push notifications. Also, 
most native apps are able to work offline, 
sync in the background, and have access 
to sensors (e.g.: camera and microphone). 


There are three common downsides of native app, which are related to usage, 
reach and cost. More and more users are not willing to down a new app since they 
already had a lot of apps on their device. In other cases, the customers tend to make 
"one-time purchase" while downloading the app is more suitable for regular visits. 

Besides, compared to the web, the reach of native apps is obviously not as great, 
requiring a separate version for each platform (Android & iOS). Apart from it, app 
developers often spend more on the distribution (submitting to app stores) than 
they actually earn back. Therefore, if the native ecosystem is not going well as 
expected, developing a Magento native app is more harm than good. 
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Google data shows that mobile users visit around 100 sites per month, which 
tells us the powerful reach of the web. They made one-off needs. Also, accessing 
the web might be safer than native apps, especially when it goes with HTTPs, and 
its permission model makes users feel respected and more private. 

The major issue with the webs is the poor performance on mobile — no fast page 
load speed, no push notification, no presence on home screen. A lot of customers 
might abandon a website since they cannot wait more than 5 seconds for the page 
to load. 

It's clear that both native apps and mobile webs have pros and cons. Magento 
PWA comes to solve the disadvantages while combining the advantages of both 
worlds. PWAs are able to earn their place on users' mobile home screen and in the 
notification tray. And they don't have to give up on reach. The term PWAs really just 
means radically improving the quality of your end-to-end user experience. 
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At the moment, very limited choices are 
available for Magento 1 stores when they 
want to implement the Progressive Web 
Apps. Some people even think that it's 
impossible to integrate PWA to the 


websites with Magento 1.9.x versions. So, 
what is the truth? Is carrying out PWA for 
Magento 1 a wise decision? 


The good news: Yes, it's possible to 
convert a Magento 1 websites to a 
Progressive Web App. 


There are some Magento 1 PWA extensions that you can easily install and 
configure to your store. Those extensions might be free or up to $100, and the 
related installation service is around $50. 

In general, available Magento PWA modules are developed based on Google's 
Service Worker, including some basic functions of Progressive Web App such as 
add to home screen, push notification, and offline mode. 

The bad news: ALL Magento experts will Stop you from integrating PWA on 
Magento 1.9.x websites! 

It seems easy to upgrade a Magento website to Progressive Web App just by 
installing an extension, but you shouldn't. Why? 

1. All Magento 1 PWA Extensions Can Only Give You A "Poor Version" Of PWA 

As you might know, PWA is able to boost customer and in-store engagement 
thanks to its powerful app-like features, such fast loading speed, shortcut on mobile 
home screen, splash page, full-screen mode, network independence, push 
notification, background sync, low data consumption, and so on. 

Nonetheless, most of the Magento 1 PWA extensions are worthless in improving 
your website speed. After having those installed, your site will look like a "responsive 
website" with "add to home screen" and "push notification" features, no more no 
less. 
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Although all PWA module providers say that their products will provide all features 
of Progressive Web Apps, you should not rely on those flowery advertisements. Try 
their extension demos and make your own evaluation. 

In general, available Magento PWA modules are developed based on Google's 
Service Worker, including some basic functions of Progressive Web App such as 
add to home screen, push notification, and offline mode. 

2. The Available Modules Don't Use The Official PWA Studio's Tools Of Magento 

As mentioned before, the PWA modules for Magento 1 are using Google's Service 
Worker instead of Magento PWA Studio officially released by Magento. Therefore, 
there is no guarantee for the quality and performance of PWA on your site. 

From my experience, Google changes its API very often, and every time the API is 
updated, the developers have to update the Magento PWA extensions. As a result, 
the store owners must also spend a lot of time installing the latest versions of the 
module; otherwise, the PWA can stop working and have a negative effect to end 
users' experience. 

On the other hand, by developing your PWA with Magento 2 PWA Studio, you don't 
need to worry about the stability of your web app. Moreover, Magento PWA Studio 
brings about a new concept of PWA Storefront that will replace the traditional 
Magento frontend and be connected to Magento backend via API. By doing that, a 
storefront can provide different pieces of functionality using React modules without 
whole dependence on Magento backend. 

3. Magento 1 Websites Will Not Be Supported By Magento In The Near Future 

This is not a prediction but an official announcement from Magento: 

11 For Magento Commerce 7 (formerly known as Enterprise Edition): 

For Magento Commerce 7, we are providing software support through June 2020. 
Depending on your version, software support may include both quality fixes and 
security patches. Please review our Magento Software Lifecycle Policy to see how 
your version of Magento Commerce 7 is supported. 
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For Magento Open Source 7 (formerly known as Community Edition): 

For Magento Open Source 1, we are providing software security patches through 
June 2020 to ensure those sites remain secure and compliant. Please visit our Legal 
Terms page and review our Magento Open Source Software Maintenance Policy to 
see which versions of Magento Open Source 7 continue to receive software security 
maintenance. 

While we're committed to supporting the success of all merchants, the time to 
upgrade to Magento Commerce 2 is now. Magento Commerce 2 delivers superior 
cloud-hosted performance at scale, freedom from IT bottlenecks with creating, 
scheduling, and launching compelling content, and true business intelligence 
capabilities. Plus, Magento's unmatched flexibility enables our global community of 
partners and developers to deliver virtually any commerce experience in record time 
and at a superior total cost of ownership. As a result, we're seeing tremendous 
community and market momentum for Magento 2 as a whole, now with more than 
2,000 available extensions, new capabilities launching quarterly (version 2.3 is on the 
horizon), and over 8,000 new quarterly Magento 2 site launches on top of 30,000 
existing Magento 2 sites. 

We encourage all Magento Commerce 7 customers to reach out to their Customer 
Success Managers or development partners to start their upgrade planning as soon 
as possible." 

More and more Magento 1 store owners decided to migrate to Magento 2 not only 
because of Magento Vs cease of support but also due to Magento 2's powerful 
capabilities. After implementing Magento 2 migration, your site will be transformed 
totally, from the storefront design, functionality, to the site management on the 
backend. 

If you have an intention to migrate from Magento 1 to Magento 2 one day, 
integrating your site to PWA now is not highly recommended. 
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4/ There Are Many Promising PWA Integration Solutions For Magento 2 Out 
There... 

When it comes to PWA for Magento 2, you have many options: 

• Installing a Magento 2 Progressive Web App extension, but there might be 
some limitations associated with it like modules for Magento 

• Hiring Progressive Web App developers to build your PWA from the beginning, 
using Magento 2 PWA Studio. 

• Looking for a PWA integration service with ready-made solutions (e.g.: 
Magento 2 PWA Theme by Tigren). 

The third option might be the best solution since it will help you to minimize the 
time to market (time for PWA development), thanks to the ready-built PWA 
storefront and core API of the providers. 

Last advice for the merchants who seek a PWA for Magento 1 integration 
solutions... 

Shoppers are increasingly turning to mobile, which results in substantial demands 
for mobile solutions like Progressive Web App. If you want to apply PWA for 
Magento websites, you should migrate to Magento 2 and develop PWA at the same 
time. It's worth noting that you can save time and money if implementing both 
migration and PWA simultaneously since you can replace the step of new theme 
development by PWA storefront development. 
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Yes, 100%. 

If you implement Magento 2 Progressive Web App, it's possible that you will be 
on the first group of Magento stores who applied PWA successfully. 

As a result, your company might not only be more well-known in the Magento 
community but also around the world since the number of PWA lovers is numerous. 

So, what if you only have a plan to develop PWA in the future? Well, it means that 
you lose a one-of-a-kind opportunity to spread your reputation and become the 
pioneers in your market. 
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Up to now, PWAs have caught the eyes of many 
big companies from different industries. The 
more interesting thing is that all of the PWA early 
adopters got impressive achievements in their 
traffic, conversions, sales, and customer 
satisfaction after launching their web app. 
Although Magento 2 Progressive Web App is ben¬ 
eficial in varied ways, it is still evolving. As a 
result, there are still some drawbacks associated 
with PWAs that you should know before imple¬ 
menting this technology: 

1. Unable To Access Certain Features Of Mobile Devices 

In spite of being a perfect replacement for Magento native apps, Magento 2 
Progressive Web App cannot deliver some complex features like the traditional 
apps. For example, it might hard to build a PWA with high graphics and intense 
animation. 

Moreover, unlike mobile native apps, PWAs have limited access to a device's 
Bluetooth, vicinity sensors, proximity sensors, ambient light, advanced camera 
controls, NFC, geofencing, fingerprint scanner, contacts, and so on. However, since 
most of the Magento e-commerce stores don't require these accesses, you can 
ignore this weakness. 



2. Lose Potential Traffic From The App Stores 

On the one hand, Magento PWA helps to eliminate the time-consuming app 
searching, download and installation process. The store owners don't need to 
submit their PWAs to any app store. On the other hand, due to PWA's absence, the 
stores might lose a wide range of users who still prefer searching for apps on the 
central app stores. 
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This issue might be solved if you use Progressive Web App as a supplement 
rather than a replacement of native app. However, if you care more about traffic 
from websites while having a tight budget, converting your website to PWA instead 
of developing a new native app is highly recommended. 

3. Different Workflow On The IOS Devices 

On Android devices, when users visit the website, it will instantly show a message 
on the bottom to catch the users' attention. If the users click on this message, they 
will be asked to enable push notification and add the PWA to their home screen. 

Meanwhile, on the iOS devices, the users must click on the Share button, navigate 
to the section "Add to Home Screen" on the menu and manually create the shortcut 
without the step-by-step instructions. Also, when launching the PWA, you will not 
see the splash page like on the Android devices. 

Apart from it, Magento 2 Progressive Web App might not be compatible with 
some old iOS devices. It only supports devices with the iOS version from 11.3 and 
above. 

Back to several years ago, when PWA was just introduced, it even didn't work at 
all on the iOS devices but now it can run with core features. Hope that in the near 
future, this technology will run with full functionality on the iOS operating system. 
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4. Have Limited Choices Of Experienced Magento PWA Developers 

Compared to native app development, it would be definitely more difficult to hire 
Magento PWA developers with reliable expertise. Up to now, there have been less 
than 10 Magento development companies providing Progressive Web App 
integration services for Magento 2. 

Among those, Tigren agency stands out by offering their exclusive Magento 2 
PWA Theme that can convert your site to PWA with minimum time and effort. It 
includes a well-designed PWA storefront (can be customized) and a base API 
(covering all Magento default features). Although you can some similar themes 
from other providers, none of them can deliver a more comprehensive PWA 
versionlike Tigren's. 

5. Take Time To Educate Users 

Undoubtedly, Magento 2 PWA is a highly concerned topic in the Magento 
community but it might still be a strange concept for the end users. Sometimes, the 
customers are invited to add the PWA to their home screen or enable push 
notification but they deny due to the lack of PWA understanding. 

As a result, Magento store owners should also prepare for that by introducing 
about the new technology before its official launch and let the buyers know various 
benefits when using PWA. Gradually, everyone will be familiar with Progressive Web 
App and might change their habit from downloading native apps to more convenient 
web apps. 

As you can see, there are five major shortcomings of Magento Progressive Web 
App. Nonetheless, the benefits that this technology can bring about far outweigh 
those downsides. Moreover, PWAs haven't reached its peak of development, many 
experts believe all of the existing issues will be tackled sooner or later. If you are a 
Magento store owner, it's time to bring your site to the next level, with the help of 
PWA. 
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Chapter 5: 

Move Forward With Magento PWA 

• Future of PWA & PWA in Magento Community 

• Next Steps for Your Business 





Version 


Release Date 

Conning Soon! 
October 7, 2019 
June 25, 2019 
March 21,2019 


PWA Studio 5.0.0 
PWA Studio 4.0.0 
PWA Studio 3.0.0 
PWA Studio 2.1.0 
PWA Studio 2.0.0 
PWA Studio 1.1.0 
PWA Studio 1.0.0 


February 21,2019 
September 27, 2018 
April 24, 2018 


Below are the plans and promises of Magento for PWA Studio: 

PWA Studio deliverables will continue to focus on improvements in the areas of 
developer and shopper experience. Where 2018 created a great foundation, 
providing a baseline toolset for developers to begin creating their own PWAs, we are 
committed to advancing themes of: ease of use, implementation, and unlocking 
additional features in a PWA shopper experience. 

CURRENT PRIORITIES (Q3-Q4 2019) 

Upcoming releases will focus on maturation of the Peregrine library of modular 
components. Additionally, we'll continue to focus on developer experience with 
improvements to build tools and scaffolding. Detailed information can be found in 
our milestones view from the PWA Studio backlog 
Developer Experience 

• Improvements for build tools 

• Scaffolding 

• Continue GraphQL consumption/adoption 

• Marketplace Extension support 

• Performance optimizations 

• Expansion of Test Coverage 

• Bug Fixes 
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Shopper Experience 

• Modular Component Library (Peregrine) 

► Definition and Developer Docs 

► Extracting Venia Component logic into Peregrine Hooks 

► Rebinding components to consume context 

► Replace connected components with context hooks 

► Replace remaining redux selectors with derived state values 

• Venia Storefront 

► Feature gap coverage w/ UX/UI research and design (Wishlists, My Account, 
Full Checkout, Ratings and Reviews) 

► Design improvements for existing components and workflows 

• Pagebuilder and PWA Studio 

► Initial Proof of Concept and tech demo delivery 

► Alpha and Beta release planning 

UP NEXT (Q1-Q2 2020) 

Continued focus on Peregrine Hooks library and Venia refactoring for modularity. 

Developer Experience 

• Continue GraphQL consumption/adoption 

• Extensibility Improvements 

• Build and Pipeline Improvements 
Shopper Experience 

• Venia Component Enhancements 

• Push Notification Improvements 

• Online/Offline Improvements 

FUTURE CONSIDERATION/DISCOVERY (MID-LATE 2020) 

• Shopper Experience additional features 

• Improvements to Page Builder Integration 

• Integration for Magento Admin 

• Adobe Experience Manager Integration 

• B2B Theming 


(Source: https://github.com/maQento/pwa-studio/wiki/Roadmap ) 
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Here are some immediate steps you can take to prepare for your PWA project: 

Start budget planning for 2020: As 2019 draws to a close, make sure that 
PWAs are on your 2020 roadmap. Furthermore, start planning for a migration from 
your current website to PWAs next year to be ahead of the curve and get a head start 
on the competition. 

Take a PWA experience test drive: You should try some of the early trailblazer 
sites like https://www.aliexpress.com/ , https://www.lancome-usa.com , or visit our 
PWA demo ( https://pwa-app.tigren.com/ ), to understand how it works and how 
great it is. 

Contact Tigren to complete your puzzle: What is the key to a successful 
Magento PWA development project? It's selecting the right agency that has strong 
expertise in both Magento development and PWA integration. It's TIGREN. Contact 
us by sending your request to nfo@tigren.com, then we will show you how to 
convert your site to PWA successfully! 
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Anyone can know the huge benefits of PWA, 
but only the one who takes the action early 
can gain the advantages. 



